<template>
  <div id="home">
    <!-- 网页显示 -->
    <div>
      <!-- 左半部分 -->
      <!-- 3.当isNight为true时加上夜晚相关的样式 -->
      <div :class="{home_left:true,isNight:isNight,show1:true}">
        <div :class="{author:true,nightBg:isNight}">
          <author></author>
        </div>
        <my-aside></my-aside>
      </div>
      <!-- 中间部分 -->
      <div :class="{home_center:true,isNight:isNight}">
        <router-view/>
      </div>
      <div>
      <!-- 右边部分 -->
      <div :class="{home_right:true,isNight:isNight,show1:true}">
        <div :class="{newArtical:true,nightBg:isNight}">
          <p><span class="iconfont icon-zuixin1"></span>最新文章:</p>
          <ul>
            <li v-for="item in newArticals" :key="item.id">
            <router-link :to="{path:'/home/blogDetail', query:{'id':item.id}}" :class="{textNight:isNight}"> 
              {{item.title}} 
            </router-link>
            </li>
          </ul>
        </div>
      </div>        
      </div>
    </div>
    <!-- 响应式显示 -->
    <!-- <el-row class="show2">
      <router-view/>
    </el-row>       -->
  </div>
</template>

<script>
import author from '@/components/front/home/author.vue'
import myAside from '@/components/front/home/aside.vue'
export default {
  components: {
    author,
    myAside
  },
  data(){
    return{
      isNight:false, //1.设置一个变量保存当前是否为夜晚
      newArticals:[]
    }
  },
  created(){
    //2.判断当前时间，设置变量的值
    let hour = new Date().getHours()
    if(hour > 6 && hour < 18){
      this.isNight = false
    }else{
      this.isNight = true
    }
    //
    if(this.$route.path == "/home/blog"){
      this.$router.push("/home/blog?msg=hot")
    }
    this.getNewArticals()
  },
  methods:{
    async getNewArticals(){
      const {data:res} = await this.$http.get('/blog/blogs/new')
      this.newArticals = res.page.list
    }
  }

}
</script>

<style scoped>
  .nightBg{
    background-color: #292929 !important;
    box-shadow: 0px 0px 0px #000 !important;
  }
  .isNight{
    background: #212121 !important;
    box-shadow: 0px 0px 0px #000 !important;
  }
  .textNight{
    color:#ccc !important;
  }
  #home{
    width:100%;
    height:100%;
  }
  .home_left{
    float:left;
    width:280px;
    background-color: #fbfbfb;
    padding:0px 8px 30px 8px;
    border-radius: 0 0 5px 5px;
  }
  .author{
    height:250px;
    width:250px;
    background-color: white;
    /* box-shadow: 0px 0px 10px #ccc; */
    margin:15px;
  }
  .home_center{
    float:left;
    height:100%;
    width:calc(94% - 560px - 32px);
    margin-left:3%;
    margin-right:3%;
    background-color: #fbfbfb;
    /* padding-bottom:30px;
    box-sizing: border-box; */
  }
  .home_right{
    float:right;
    width:280px;
    background-color: #fbfbfb;
    padding:15px 8px 30px 8px;
    border-radius: 0 0 5px 5px;
  }
  .newArtical{
    width:250px;
    margin-left:15px;
    padding-top:25px;
    padding-bottom:25px;
    background-color: white;
    /* box-shadow: 0px 0px 10px #ccc; */
  }
  .newArtical p{
    margin-left:15px;
    display:inline-block;
    width:120px;
    border-bottom:2px solid #7fb442;
    text-align:center;
    font-size:1rem;
    font-weight:bold;
    padding-bottom:8px;
  }
  .newArtical p span{
    margin-right:8px;
    font-size:1.5rem;
    color:red;
    font-weight:normal;
  }
  .newArtical li{
    display:inline-block;
    height:50px;
    line-height:50px;
    width:100%;
    padding-left:12px;
    padding-right:12px;
    width:200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
  }
  .newArtical li a{
    cursor:pointer;
    display:inline-block;
    width:100%;
    height:100%;
    text-decoration: none;
    color:black;
  }
  .newArtical li a:hover{
    color:#7fb442;
  }


  .articles{
    position:relative;
    background-color: rgb(250,250,250);
  }
  @media screen and (max-width:1366px){
    .home_center{
      width:100%;
      margin:0;
    }
    .show1{
      display:none;
    }
  }
</style>
